<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            padding: 50px;
        }
        #box {
            width: 100px;
        }
        #title{
            width: 100px;
            height: 40px;
        }
        #menu{
            width: 100px;
            height: auto;
            border: 1px solid #000;
            display: none;
        }
        #menu li {
            list-style: none;
            height: 30px;
            line-height: 30px;
        }
        #menu li:hover{
            background: lightcoral;
        }
    </style>
</head>
<body>
    <div id="box">
        <button id="title">下拉菜单</button>
        <ul id="menu">
            <li>下拉菜单1</li>
            <li>下拉菜单2</li>
            <li>下拉菜单3</li>
            <li>下拉菜单4</li>
        </ul>
    </div>
    
    <script>
        /*
            下拉菜单款式一：
                * 鼠标移入：下拉菜单展开 onmouseover
                * 鼠标移开：下拉菜单收起 onmouseout
        */

        //=是赋值  == 等号  ===恒等
        var box = document.getElementById('box');//通过id为title的名字，找到该元素（节点）
        var menu = document.getElementById('menu');

        box.onmouseover = function() {
            //鼠标移入：下拉菜单展开
            menu.style.display = 'block';
        }

        box.onmouseout = function() {
            //鼠标移开：下拉菜单收起 onmouseout
            menu.style.display = 'none';
        }

    </script>
</body>
</html>